<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../css/today.css"/>
	<script type="text/javascript" src="../js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="../css/iscroll.js"></script>
	<script type="text/javascript" src="../js/reset.js"></script>
	<script type="text/javascript" src="../js/rem.js"></script>
	<script type="text/javascript" src="../layer/layer.js"></script>
	<script type="text/javascript" src="../js/today.js"></script>
	<script type="text/javascript">
			$(window).load(function() {
				$("#status").fadeOut();
				$("#preloader").delay(350).fadeOut("slow");
				$('#box').delay(350).fadeIn()
			})
		</script>
</head>
<body>
		<!--页面加载 开始-->
		  <!--<div id="preloader">
		    <div id="status">
		      <p class="center-text"><span>拼命加载中···</span></p>
		    </div>
		  </div>-->
		  <!--页面加载 结束--> 
	<div id="box">
		<header class="today-head">
			<i onclick="goBack()" class="iconfont">&#xe621;</i>
		     <h2>每日推荐</h2>
			<p class="icon">today</p>
		</header>
		 <section class="today-content" id="wrapper">
			<div class="today-cont" id="scroller">
				<div id="pullDown">
					<span class="pullDownIcon"></span><span id="pullDownLabel" class="pullDownLabel">下拉刷新...</span>
				</div>
				
				<ul id="thelist">
					<li class="today-top">
						<div class="today-top-head">
							<div></div>
						    <h2>today</h2>
						    <div></div>
						</div>
						<ul class="today-top-today">
							<!--<li class="today-top-content">
								<img src="../img/timg.jpg"/>
								<p>VP战队重回世界之巅全程回顾</p>
								<p>by Dotaer | DOTA2 /03'39"</p>
							</li>-->
						</ul>
				   </li>
				   <!--<li class="today-foot">
						<div class="today-foot-head">
							<div></div>
						    <h2>Aug.08</h2>
						    <div></div>
						</div>
						<ul>
							<li class="today-foot-content">
								<img src="../img/timg.jpg"/>
								<p>VP战队重回世界之巅全程回顾</p>
								<p>by Dotaer | DOTA2 /03'39"</p>
							</li>
							<li class="today-foot-content">
								<img src="../img/timg.jpg"/>
								<p>VP战队重回世界之巅全程回顾</p>
								<p>by Dotaer | DOTA2 /03'39"</p>
							</li>
						</ul>
				   </li>-->
				</ul>
				<div id="pullUp">
				  <span class="pullUpIcon"></span><span id="pullUpLabel" class="pullUpLabel">上拉加载更多...</span>
			    </div>
		   </div>
		 </section>
		 <footer id="footer">
		 	
		 </footer>
	</div>
</body>
<script type="text/javascript">
	function goBack(){ 
    window.history.back() 
} 
pullDownAction ()
/*跳转页面*/
 $('.today-top-content').on('click',function(){
 	window.location.href='detail.html'
 })
  


var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0,
	page=0;

/**
 * 下拉刷新 （自定义实现此方法）
 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
 */
function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		
		$.ajax({
            type: 'POST',
            url: 'http://192.168.199.114:8080/HJF/user/get_all_daily_video_list.do',
            dataType: 'JSON',
            data:{user_id:""},
            success: function(data){
            	console.log(data)
            	console.log(data.data.daily_list[0].video_list)
            	/*today推荐*/
            	$.each(data.data.daily_list[0].video_list, function(index) {
            	  var aLi=$("<li class=today-top-content></li>")
            	  var oImg=$('<img src="'+data.data.daily_list[0].video_list[index].channel_head_img_url+'">')
            	  var oP=$('<p>'+data.data.daily_list[0].video_list[index].video_summary+'</p>')
            	  var oP2=$('<p>'+data.data.daily_list[0].video_list[index].video_label_name+" | "+data.data.daily_list[0].video_list[index].video_title+" / "+data.data.daily_list[0].video_list[index].video_time+'</p>')
            	   aLi.append(oImg)
            	   aLi.append(oP)
            	   aLi.append(oP2)
            	  $('.today-top-today').append(aLi) 
            	  oImg.on('click',function(){
            	  	window.location.href="detail.html"
            	  	localStorage.setItem('video_id',data.data.daily_list[0].video_list[index].video_id)
            	  })
            	});
            	
            	
            },
            error: function(xhr, type){
                alert('系统繁忙');
               
            }
        });
		myScroll.refresh();		//数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 100);	// <-- Simulate network congestion, remove setTimeout from production!
}

/**
 * 滚动翻页 （自定义实现此方法）
 * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
 */
function pullUpAction (page) {
	setTimeout(function(){
        $.ajax({
            type: 'POST',
            async:false,
            url: 'http://192.168.199.114:8080/HJF/user/get_all_daily_video_list.do',
            dataType: 'JSON',
            data:{user_id:""},
            success: function(data){
            	console.log(data)
            	console.log(data.data)
            	console.log(data.data.daily_list[page])
            	/*today推荐*/
            	var oDiv=$('<li class="today-foot"><div class="today-foot-head">'+
							'<div></div>'+
						    '<h2>'+data.data.daily_list[page].daily_time+'</h2>'+
						    '<div></div>'+
						'</div></li>')
            	 var oUl=$('<ul></ul>')
            	$.each(data.data.daily_list[page].video_list, function(index) {
            	  var aLi=$("<li class='today-foot-content'></li>")
            	  var oImg=$('<img src="'+data.data.daily_list[page].video_list[index].channel_head_img_url+'">')
            	  var oP=$('<p>'+data.data.daily_list[page].video_list[index].video_summary+'</p>')
            	  var oP2=$('<p>'+data.data.daily_list[page].video_list[index].video_label_name+" | "+data.data.daily_list[page].video_list[index].video_title+" / "+data.data.daily_list[page].video_list[index].video_time+'</p>')
            	   aLi.append(oImg)
            	   aLi.append(oP)
            	   aLi.append(oP2)
            	   oUl.append(aLi) 
            	   console.log(data.data.daily_list.length)
            	  
            	   oImg.on('click',function(){
            	  	/*window.location.href="detail.html"*/
            	  	localStorage.setItem('video_id',data.data.daily_list[page].video_list[index].video_id)
            	  })
            	});
            	
            	oDiv.append(oUl)
            	 $('#thelist').append(oDiv)
            },
            error: function(xhr, type){
                alert('Ajax error!');
               
            }
        });
		myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
	 },100)// <-- Simulate network congestion, remove setTimeout from production!
}

/**
 * 初始化iScroll控件
 */
function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		scrollbarClass: 'myScrollbar', /* 重要样式 */
		useTransition: false, /* 此属性不知用意，本人从true改为false */
		topOffset: pullDownOffset,
		bounce:true,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
				myScroll.refresh();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';	
				page++
				console.log(page)
				pullUpAction(page);	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 100);
}

//初始化绑定iScroll控件 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false); 
</script>
</html>